<template>
  <view class="o-h" :data-theme="theme()" :class="theme() || ''">
    <view class="bg-top"></view>
    <view class="task-center mb20">
      <view class="task-center-item d-s-c">
        <image
          class="task-logo"
          :src="shopData.logoFilePath || '/static/shop-default.png'"
          mode="aspectFill"
        >
        </image>
        <view class="flex-1">
          <view class="text-ellipsis f28 gray3 mb10">{{ shopData.name }}</view>
          <view class="h3 shop_info">
            <view class="d-s-c white f24 mb10" style="white-space: nowrap">
              <view class="pr d-s-c" style="white-space: nowrap">
                <view class="starts-box">
                  <image
                    class="starts"
                    v-for="(itmes, index) in getScore(shopData.serverScore, 1)"
                    :key="index"
                    src="/static/icon/start-2.png"
                    mode=""
                  ></image>
                  <image
                    class="starts"
                    v-if="getScore(shopData.serverScore, 2)"
                    src="/static/icon/start-1.png"
                    mode=""
                  ></image>
                </view>
                <image
                  class="starts"
                  v-for="(itmes, index) in 5"
                  :key="index"
                  src="/static/icon/start-0.png"
                  mode=""
                ></image>
              </view>
              <view
                style="color: #666666; white-space: nowrap; margin-right: 10rpx"
              >
                {{ shopData.serverScore }}分
              </view>
              <view style="color: #999999; white-space: nowrap">
                {{ shopData.favCount }}人关注
              </view>
            </view>
          </view>
        </view>
        <button class="collected" @click="guanzhu()">
          {{ isfollow ? "已关注" : "+关注" }}
        </button>
      </view>
    </view>
    <view class="task-center1 mb20" v-if="false">
      <view class="task-center-item1 d-s-c" @click="opencat()">
        <text class="tiltles">联系客服</text>
        <text class="icon iconfont icon-kefu"></text>
      </view>
    </view>
    <view class="task-center2 mb20">
      <view class="task-center-item2 d-s-c" @click="openClick()">
        <text class="tiltles">商户简介</text>
        <view class="flex-1 tr f28 gray9">{{
          shopData.description || ""
        }}</view>
      </view>
      <view class="task-center-item2 d-s-c">
        <text class="tiltles">所在地区</text>
        <text class="flex-1 tr f28 gray9">{{ shopData.address }}</text>
      </view>
      <view class="task-center-item2 d-s-c">
        <text class="tiltles">开店时间</text>
        <text class="flex-1 tr f28 gray9">{{ shopData.createTime }}</text>
      </view>
    </view>
    <view class="task-center3 mb20">
      <view
        class="task-center-item3 d-s-c"
        @click="yulan(shopData.businessFilePath, 1)"
      >
        <text class="tiltles">证件信息</text>
        <view class="flex-1"></view>
        <view>
          <text class="icon iconfont icon-he_15zhengzhaoguanli"></text>
          <text class="icon iconfont icon-jiantou"></text>
        </view>
      </view>
      <view class="task-center-item3 d-s-c">
        <text class="tiltles">保证金</text>
        <view class="flex-1 tr f28 gray9" v-if="shopData.status == 0"
          >已缴纳</view
        >
        <view class="flex-1 tr f28 gray9" v-if="shopData.status != 0"
          >未缴纳</view
        >
      </view>
    </view>
    <view v-if="showModal" class="modal">
      <view class="modal-mask"></view>

      <view class="modal-content">
        <text
          class="icon iconfont icon-guanbi close-icon"
          @click="cancelAction"
        ></text>
        <view class="modal-header">
          <view class="modal-text">提示</view>
          <!-- <image src="/static/imgs/提示.jpg" class="warning-icon"></image> -->
        </view>
        <view class="modal-body">
          <view>{{ shopData.description || "暂无内容" }}</view>
        </view>

        <!-- <view class="modal-buttons">
            <button @click="cancelAction">确认</button>
          </view> -->
      </view>
    </view>
    <view class="">
      <button class="shop-btns" @click="clickFunc()">查看全部商品</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      invitation_id: 0,
      day_task: [],
      grow_task: [],
      back_image: "",
      shopSupplierId: "", //店铺ID
      shopData: {},
      isfollow: "", // 是否关注本店
      showModal: false,
      showModalimg: false,
    };
  },
  onLoad(option) {
    let self = this;
    self.shopSupplierId = option.shopSupplierId;
  },
  onShow() {
    this.getData();
  },
  methods: {
    opencat() {
      uni.showToast({
        title: "尚未设置客服",
        icon: "none", //如果要纯文本，不要icon，将值设为'none'
        duration: 1000, //持续时间为 2秒
      });
    },
    openClick() {
      this.showModal = true;
    },
    cancelAction() {
      this.showModal = false;
    },
    openClickImg() {
      this.showModalimg = true;
    },
    cancelActionImg() {
      this.showModalimg = false;
    },
    guanzhu() {
      let self = this;
      self._postBody(
        "user/favorite/add",
        {
          pid: self.shopSupplierId,
          type: 10,
        },
        (res) => {
          if (self.isfollow == 0) {
            self.isfollow = 1;
          } else if (self.isfollow == 1) {
            self.isfollow = 0;
          }
        }
      );
    },
    clickFunc(e) {
      let self = this;
      let url = "";
      url = "/pages/shop/shop?shopSupplierId=" + self.shopSupplierId;
      if (url) {
        self.gotoPage(url);
      }
    },
    getScore(n, type) {
      n = n * 1;
      if (n <= 0 || !n) {
        return 0;
      }
      let num = n % 1;
      if (type == 1) {
        return n - num;
      }
      if (type == 2) {
        if (num == 0) {
          return 0;
        } else {
          return 1;
        }
      }
    },
    goback() {
      uni.navigateBack();
    },
    getData() {
      let self = this;
      self._postBody(
        "supplier/index/index",
        {
          shopSupplierId: self.shopSupplierId,
        },
        (res) => {
          self.shopData = res.data.detail;
          self.isfollow = res.data.detail.isfollow;
        }
      );
    },
  },
};
</script>

<style lang="scss">
.reg180 {
  padding-right: 20rpx;
  text-align: right;
  transform: rotateY(180deg);
  position: absolute;
  bottom: 0;
}

.head_top .icon-jiantou {
  color: #333333;
  font-size: 30rpx;
}

.head_top {
  width: 100%;
  position: relative;
  /* padding-top: var(--status-bar-height); */
  height: 30px;
  line-height: 30px;
  color: #333333;
  font-size: 36rpx;
}

/* modal样式 */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* 半透明黑色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

/* modal-mask样式 */
.modal-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* modal-content样式 */
.modal-content {
  background-color: #fff;
  /* 弹框背景色 */
  border-radius: 20rpx;
  /* 圆角 */
  padding: 40rpx;
  /* 内边距 */
  position: relative;
  /* 相对定位 */
  width: 50%;
  /* 修改宽度 */
  max-width: 600rpx;
  /* 设置最大宽度 */
}

.modal-header {
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* 文字样式 */
.modal-text {
  font-size: 30rpx;
  font-weight: 400;
  margin-bottom: 100rpx;
  text-align: center;
}

.warning-icon {
  width: 200rpx;
  height: 186rpx;
  align-items: center;
  margin-bottom: 50rpx;
}

.modal-body {
  text-align: center;
  font-size: 28rpx;
  margin-bottom: 100rpx;
}

/* 按钮样式 */
.modal-buttons {
  margin-top: 20rpx;
  text-align: center;
}

.modal-buttons button {
  color: #fff;
  /* 按钮文字颜色 */
  border: none;
  /* 去除按钮边框 */
  border-radius: 30rpx;
  /* 圆角 */
  width: 130rpx;
  margin: 0 auto;
  font-size: 24rpx;
  /* 调整按钮文字大小 */
  cursor: pointer;
  /* 鼠标样式 */
  background-color: #f36a23;
  @include background_color("background_color");
}

.modal-buttons button:hover {
  @include background_color("background_color");
}

/* 关闭图标样式 */
.close-icon {
  position: absolute;
  /* 绝对定位 */
  top: 20rpx;
  /* 距顶部的距离 */
  right: 20rpx;
  /* 距右侧的距离 */
  font-size: 26rpx;
  /* 图标大小 */
  cursor: pointer;
  /* 鼠标样式 */
}

.shop-btns {
  width: 710rpx;
  height: 92rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin-left: 20rpx;
  color: #ff4c01;
  font-weight: 400;
  font-size: 28rpx;
  text-align: center;
  line-height: 92rpx;
}

.key-name {
  width: 200rpx;
}

.message-img {
  width: 40rpx;
  height: 38rpx;
}

.shop_info {
  flex: 1;
  box-sizing: border-box;
  padding-top: 10rpx;

  .icon.icon-jiantou1 {
    font-size: 28rpx;
    color: #fff;
    font-weight: 400;
  }
}

.starts {
  width: 20rpx;
  height: 20rpx;
  margin-right: 10rpx;
  display: block;
}

.starts-box {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.bg-top {
  width: 750rpx;
  height: 617rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  background: linear-gradient(-180deg, #394263 0%, rgba(255, 255, 255, 0) 100%);
}

.task-center {
  padding: 16rpx 23rpx 18rpx 22rpx;
  // margin-top: -580rpx;
  margin: 20rpx;
  border-radius: 15rpx;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
}

.task-center1 {
  padding: 0 19rpx 0 23rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  border-radius: 20rpx;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
}

.task-center2 {
  padding: 20rpx 19rpx 20rpx 23rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  border-radius: 15rpx;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
}

.task-center3 {
  padding: 12rpx 19rpx 0 23rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  border-radius: 15rpx;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
}

.task-center4 {
  padding: 12rpx 19rpx 0 23rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  border-radius: 15rpx;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
}

.task-center-item {
  height: 136rpx;
  background: #ffffff;
}

.task-center-item1 {
  height: 92rpx;
  background: #ffffff;
}

.tiltles {
  // width: 113rpx;
  white-space: nowrap;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
}

.task-center-item2 {
  // height: 88rpx;
  background: #ffffff;
  padding: 20rpx 0;
}

.task-center-item3 {
  height: 88rpx;
  background: #ffffff;
}

.task-center-title {
  font-size: 32rpx;
  color: #121212;
  padding: 32rpx 0;
}

.task-logo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 35rpx;
  flex-shrink: 0;
}

.task-points {
  width: 38rpx;
  height: 38rpx;
  margin-left: 14rpx;
  flex-shrink: 0;
}

.task-btns {
  width: 147rpx;
  height: 58rpx;
  border-radius: 29rpx;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
  margin-right: 26rpx;
  font-size: 24rpx;
  box-sizing: border-box;
  border: 1rpx solid #eeeeee;
  background-color: #eeeeee;
  color: #666666;
}

.task-btns.active {
  @include border_color("border_color");
  @include background_color("background_color");
  @include text_color("text_color1");
}

.collected {
  width: 128rpx;
  height: 56rpx;
  border-radius: 26rpx;
  font-size: 24rpx;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  color: #fff;
  border: 1px solid;
  @include border_color("border_color");
  @include background_color("background_color");
}

.icon-he_15zhengzhaoguanli.icon {
  font-size: 32rpx;
  color: #333;
}

.icon-jiantou.icon {
  font-size: 26rpx;
  color: #333;
}
</style>
